import React, { useState } from 'react'
import { View, Text, StyleSheet } from 'react-native'
export default function foundHeaderTab() {
    const [foundHeaderTab, setFoundHeaderTab] = useState([
        { id: 1, name: '推荐' },
        { id: 2, name: '直播' },
        { id: 3, name: '学习' },
        { id: 4, name: '搞笑' },
        { id: 5, name: '穿搭' },
        { id: 6, name: '知识' },
    ])
    const [activeTab, setActiveTab] = useState(1)
    const changeTab = (id: number) => {
        setActiveTab(id)
    }

    return (
        <View style={styles.foundHeaderTabFlag}>
            {
                foundHeaderTab.map((item) => {
                    return (
                        <Text key={item.id} style={activeTab === item.id ? styles.activeTextFoundHeaderTabTab : styles.TextFoundHeaderTabTab} onPress={() => changeTab(item.id)}>{item.name}</Text>
                    )
                })
            }
        </View>
    )
}

const styles = StyleSheet.create({
    foundHeaderTabFlag: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        height: 30,
        alignItems: 'center',
    },
    activeTextFoundHeaderTabTab: {
        transform: 'scale(1.1)',
        color: '#000000',
    },
    TextFoundHeaderTabTab: {
        color: '#3e3e3e',
    }
})
